<!--
 * @Author: your name
 * @Date: 2021-03-26 19:06:42
 * @LastEditTime: 2021-05-25 10:17:55
 * @LastEditors: Please set LastEditors
 * @Description: 个人中心
 * @FilePath: /medicine-web/src/views/user/index.vue
-->
<template>
  <div class="user-container" ref="userContainer">
    <div class="main-banner"></div>
    <div class="user-content">
      <p class="user-content__title">个人中心</p>
      <div class="user-content__container">
        <div class="user-content__left">
          <a-menu v-model="currentTab" mode="vertical" class="tab-result__outter">
            <a-menu-item v-for="item in tabList" :key="item.label" @click="navToPage(item.router)">{{item.label}}</a-menu-item>
          </a-menu>
        </div>
        <div class="user-content__right">
          <ul class="user-content__options">
            <li @click.stop="handleSelect(1)" v-if="currentTab[0] === '文献集锦' || currentTab[0] === '会议进展' || currentTab[0] === '材料总结' || currentTab[0] === 'Q&A'">
              <img :src="require('@/assets/image/user_download.png')" alt="" style="width: 23px; height: 16px;">
              <span :class="{'user-content__text': true, 'user-content__text-selected': isSelected == 1}">下载记录</span>
            </li>
            <li @click.stop="handleSelect(2)" :style="currentTab[0] !== '文献集锦' && currentTab[0] !== '会议进展' && currentTab[0] !== '材料总结' && currentTab[0] !== 'Q&A' ? 'margin-left: 0px;' : 'margin-left: 60px;'">
              <img :src="require('@/assets/image/user_collection.png')" alt="" style="width: 19px; height: 20px;">
              <span :class="{'user-content__text': true, 'user-content__text-selected': isSelected == 2}">收藏记录</span>
            </li>
          </ul>
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'user',
  data () {
    return {
      currentTab: ['文献集锦'],
      tabList: [
        { label: '文献集锦', value: 1, router: '/user/profile/document' },
        { label: '临床试验', value: 2, router: '/user/profile/clinical' },
        { label: '会议进展', value: 3, router: '/user/profile/meeting' },
        { label: '药企资讯', value: 4, router: '/user/profile/realinfo' },
        { label: '材料总结', value: 5, router: '/user/profile/summary' },
        { label: 'Q&A', value: 6, router: '/user/profile/qanda' },
      ],
      isSelected: 1 // 1: 下载列表  2: 收藏列表
    }
  },
  methods: {
    handleSelect (index) {
      this.isSelected = index
      this.$action('setSelection', index)
    },
    navToPage (url) {
      this.$router.push(url)
    },
    initRouterView () { // 路由选择el-menu的高亮显示
      for (const item of this.tabList) {
        if (item.router === this.$route.path) {
          this.currentTab = [item.label]
        }
      }
    },
  },
  mounted () {
    this.initRouterView()
    window.onscroll = (e) => {
      for (let item of this.$router.options.routes[5].children[0].children) { // 保持menus状态
        item.meta.y = window.pageYOffset
      }
    }
  },
  beforeDestroy () {
    window.removeEventListener('scroll', () => {}, false)
    this.setLocalStorage('currentTab', ['文献集锦'])
  },
  created () {
    this.currentTab = [this.getLocalStorage('currentTab')]
    switch (this.currentTab[0]) {
      case '文献集锦':
        this.isSelected = 1
        this.$router.replace('/user/profile/document', this.$router.length - 1)
      break;
      case '临床试验':
        this.isSelected = 2
        this.$router.replace('/user/profile/clinical', this.$router.length - 1)
      break;
      case '会议进展':
        this.isSelected = 1
        this.$router.replace('/user/profile/meeting', this.$router.length - 1)
      break;
      case '药企资讯':
        this.isSelected = 2
        this.$router.replace('/user/profile/realinfo', this.$router.length - 1)
      break;
      case '材料总结':
        this.isSelected = 1
        this.$router.replace('/user/profile/summary', this.$router.length - 1)
      break;
      case 'Q&A':
        this.isSelected = 1
        this.$router.replace('/user/profile/qanda', this.$router.length - 1)
      break;
      default:
        this.isSelected = 1
        this.$router.replace('/user/profile/document', this.$router.length - 1)
        break;
    }
    this.$action('setSelection', this.isSelected)
  },
  watch: {
    currentTab: function (val, oldVal) {
      switch (val[0]) {
        case '文献集锦':
          this.isSelected = 1
          this.$router.replace('/user/profile/document', this.$router.length - 1)
        break;
        case '临床试验':
          this.isSelected = 2
          this.$router.replace('/user/profile/clinical', this.$router.length - 1)
        break;
        case '会议进展':
          this.isSelected = 1
          this.$router.replace('/user/profile/meeting', this.$router.length - 1)
        break;
        case '药企资讯':
          this.isSelected = 2
          this.$router.replace('/user/profile/realinfo', this.$router.length - 1)
        break;
        case '材料总结':
          this.isSelected = 1
          this.$router.replace('/user/profile/summary', this.$router.length - 1)
        break;
        case 'Q&A':
          this.isSelected = 1
          this.$router.replace('/user/profile/qanda', this.$router.length - 1)
        break;
        default:
          this.isSelected = 1
          this.$router.replace('/user/profile/document', this.$router.length - 1)
          break;
      }
      this.$action('setSelection', this.isSelected)
      this.setLocalStorage('currentTab', val[0])
    },
    resetCurrentTab: function (val, oldVal) {
      this.currentTab = ['文献集锦']
    }
  }
}
</script>
<style lang="scss" scoped>
@import '~@/assets/styles/flex.scss';
@import '~@/assets/styles/common.scss';
.user-container {
  .main-banner {
    width: 100%;
    height: 337px;
    background-image: url('./../../assets/image/banner7.png');
    background-repeat: no-repeat;
    background-size: 123% 100%;
    padding-top: 55px;
  }
  .user-content {
    width: 1200px;
    margin: 0 auto;
    margin-top: 30px;
    .user-content__title {
      font-size: 18px;
      font-weight: bold;
      color: #555;
      margin-bottom: 45px;
    }
    .user-content__container {
      margin-bottom: 97px;
      @include flex-def;
      .user-content__left {
        width: 200px;
        .tab-result__outter {
          /deep/ .ant-menu-item {
            width: 80px;
            padding: 0px;
            font-size: 16px;
            font-weight: 400;
            color: #555555;
          }
          /deep/ .ant-menu-item-selected {
            border-bottom: 2px solid #0aacc1;
            color: #0aacc1;
            background-color: #fff;
          }
          /deep/ .ant-menu-item-active {
            border-bottom: 2px solid #0aacc1;
            color: #0aacc1;
          }
        }
      }
      .user-content__right {
        padding-left: 25px;
        .user-content__options {
          cursor: pointer;
          @include flex-def;
          @include flex-cCenter;
          margin-bottom: 35px;
          li {
            @include flex-def;
            @include flex-cCenter;
          }
          .user-content__text {
            font-size: 16px;
            color: #555555;
            line-height: 20px;
            margin-left: 10px;
          }
          .user-content__text:hover {
            color: #0AACC1;
          }
          .user-content__text-selected {
            color: #0AACC1;
          }
        }
      }
    }
  }
}
</style>